<template>
	<view class="goods-search flex-col">
		<loading-view v-if="isShowLoadingView"></loading-view>
		<view class="header">
			<view class="title p-t-20" style="font-size: 36rpx; font-weight: bold;">输入ID查询产品</view>
			<view class="search">
				<u-scan-goods v-model="goodsValue" :actionText="actionText" clearabled="true"  @search="onSearch"
					@getScanCode="getScanCodeResult" @inputChange="inputChange" @clear="clear"></u-scan-goods>
			</view>
		</view>
		<view class="content" v-if="showExplain">
			<view class="info_title p-t-20  p-b-10" style="font-size: 36rpx; font-weight: bold;">
				如何查找ID？
			</view>
			<view style="display: flex; flex-direction: column;">
				<text style="margin-top: 10rpx;">通过产品购买的订单号，依据标上的XX位产品ID编码，进行产品查询，指南如下。 </text>
				<view style="display: flex; justify-content: center; align-items: center; margin-top: 20rpx;">
					<image style="width:750rpx; height: 720rpx; " mode="aspectFit" :src="imgUrl + '/wechat/bundle/static/find_code2.png'" class="usual-item-img"></image>
					<!-- <image style="width: 700rpx; height: 400rpx;" src="../../../static/images/2_1_bg.png"></image> -->
				</view>
			</view>
		</view>
		<view class="content" v-if="!showExplain">
			<view class="info_title p-t-20 u-font-xl p-b-10">
				<view class="title">{{goodsDetail.goods.name}}</view>
				<view class="spec_value_str">货号：{{goodsDetail.item.bar_code}}； 规格：{{goodsDetail.item.spec_value_str}}</view>
			</view>
			<view style="display: flex; justify-content: center; align-items: center;">
				<image style="width:700rpx; height:700rpx" mode="aspectFit" :src="goodsDetail.item.image || goodsDetail.goods.image"
					class="usual-item-img"></image>
			</view>
		</view>
		<view class="fixed-bottom-button">
			<button class="btn br60" type="primary" size="lg"  @tap="confirmAdd()">确认</button>
		</view>
		<shop-arc-mask :aid="arcAid" :goodsDetail="goodsDetail" :service_type="service_type" :showmask="showArc"
			@hidePopMask="hidePopMask"></shop-arc-mask>
		<view class="fixed-button">
			<router-link to="/bundle/pages/contact_offical/contact_offical">
				<image style="width: 75rpx; height: 75rpx;" :src="imgUrl + '/wechat/static/images/icon_contact.png'"></image>
			</router-link>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsItem,
		getSearchpage,
		clearSearch
	} from '@/api/store';
	import {
		addMyOrderGoods
	} from '@/api/user';
	import {
		mapGetters
	} from 'vuex';
	import {
		loadingType
	} from '@/utils/type';
	import {
		getRect,
		trottle
	} from '@/utils/tools';

	import {
		DISTRIBUTION,
		DISTRIBUTIONID,
		INVITE_CODE
	} from '@/config/cachekey';
	import Cache from '@/utils/cache';

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				isShowLoadingView:false,
				service_type: 0,
				imgMood: 'aspectFit',
				showExplain: true,
				goodsDetail: {},
				goodsItemId: 0,
				goods_factory_code: '',
				actionText: "识别",
				showArc: false,
				arcAid: 0,
				goodsValue: '',
				imgUrl: `${this.$imgUrl}`,
				upOption: {
					auto: false,
					empty: {
						icon: `${this.$imgUrl}/wechat/static/images/goods_null.png`,
						tip: "暂无商品",
					}
				},
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				goodsList: [],
				hotList: [],
				historyList: []
			};
		},

		watch: {
			'sortConfig.saleSort'() {
				this.onSearch()
			},
			'sortConfig.priceSort'() {
				this.onSearch()
			}

		},
		onLoad(options) {
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
		},

		computed: {
			...mapGetters(['sysInfo','showLoading'])
		},
		methods: {
			confirmAdd() {
				if (!this.goodsDetail || !this.goodsDetail.item) {
					this.$toast({
						title: "请先输入或扫码商品编号"
					});
					return;
				}
				if (this.goodsDetail.item && this.goodsDetail.item.id) {
					// this.isShowLoadingView = true;
					addMyOrderGoods({
						item_id: this.goodsDetail.item.id,
						goods_num: 1,
					}).then(res => {
						// this.isShowLoadingView = false;
						this.$toast({
							title: res.msg
						}, {
							tab: 1,
							url: '/pages/member/member'
						});
					});
				}
			},

			async getGoodsDetailFun() {
				const {
					data,
					code
				} = await getGoodsItem({
					bar_code: this.goodsValue,
					invite_code: Cache.get(INVITE_CODE) || ''
				});
				if (code == 1) {
					this.isShowLoadingView = false;
					this.goodsDetail = data;
					this.goodsItemId = this.goodsDetail.item.id;
					console.log('====this.goodsDetail==========================');
					console.log(this.goodsDetail);
					this.showExplain = false;
				} else {
					this.isShowLoadingView = false;
					this.goodsDetail = {};
					this.goodsItemId = 0;
					this.isNull = true
					this.isFirstLoading = false;
				}
			},

			popAgreement(aid, service_type) {
				console.log(aid);
				this.arcAid = aid;
				this.showArc = true;
				this.service_type = service_type; //1:清洗服务;2羽绒回收
			},
			hidePopMask() {
				this.showArc = false;
			},
			getScanCodeResult(res) {
				console.log("====条码内容======>", res);
				this.goodsValue = res;
				this.actionText = '查询';
				this.isShowLoadingView = true;
				this.getGoodsDetailFun();
			},
			clear() {
				this.goodsValue = '';
				this.actionText = '识别';
			},
			inputChange() {
				this.actionText = '查询';
			},
			downCallback() {
				this.onRefresh()
			},

			onChange(e) {
				this.keyword = e.value
			},
			init(option) {
				const {
					id,
					name,
					type
				} = this.$Route.query
				this.type = type
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.$nextTick(() => {
						this.onRefresh()
					})
				} else {
					uni.setNavigationBarTitle({
						title: '添加产品'
					});
					this.showHistory = true

				}
			},

			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code == 1) {
						let {
							history_lists,
							hot_lists
						} = res.data;
						this.hotList = hot_lists
						this.historyList = history_lists
					}
				});
			},

			onClear() {
				if (this.id) {
					this.onRefresh();
				}
			},
			onSearch(keyword) {
				console.log('=======onSearch==============');
				this.goodsValue = keyword;
				this.getGoodsDetailFun();
			},
			onRefresh() {
				this.goodsList = []
				this.mescroll.resetUpScroll();
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
		background-color: $u-bg-color;
	}

	.goods-search {
		margin: 10rpx 30rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		.header {
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			.title{
				font-size: medium;
			}
			.search {
				margin-top: 20rpx;
				position: relative;
				z-index: 1;
				border: $-color-border solid 2rpx;
				padding: 10rpx;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			// margin: 30rpx;
			line-height: 42rpx;
			.info_title {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				// align-items: center;
				.title {
					margin: 10rpx 10rpx 20rpx 0rpx;
					font-size: medium;
				}
				.spec_value_str {
					font-size: smaller;
					color: $-color-muted;
				}
			}

			// .usual-item-img{
			// 	display: block;
			// 	width: 500rpx;
			// 	height: auto !important;
			// 	overflow: visible;
			// }
		}

		.service_button {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			.line {
				width: 94%;
				margin-top: 20rpx;
			}
		}

		.search-content {
			position: absolute;
			width: 100%;
			height: 100%;
			padding-top: 100rpx;
			z-index: 100;

			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;

				.title {
					padding: 26rpx 0;
				}

				.words {
					.item {
						line-height: 52rpx;
						height: 52rpx;
						padding: 0 24rpx;
						background-color: #F5F5F5;
					}
				}
			}
		}

		.search_button {
			margin-top: 30rpx;
		}

		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}
		
		.fixed-bottom-button{
			width: 92%;
			position: fixed;
			bottom: 60rpx;
		}

		.fixed-button {
			position: fixed;
			/* 固定在屏幕上 */
			bottom: 25%;
			/* 距离屏幕底部的距离 */
			right: 35rpx;
			/* 圆角，使其看起来更像一个圆形按钮 */
			z-index: 99;
			/* 提高层级，确保按钮在其他内容之上 */
			display: flex;
		}
	}
</style>